<template>
  <n-card class="container">
    <n-tabs 
      type="line" 
      animated 
      v-model:value="activeTab"
      class="tabs-wrapper"
    >
      <n-tab-pane name="conversion" tab="转换" />
      <n-tab-pane name="encrypt" tab="加解密" />
      <n-tab-pane name="encode" tab="编解码" />
      <n-tab-pane name="generate" tab="生成" />
      <n-tab-pane name="http" tab="HTTP工具" />
    </n-tabs>

    <div class="content-wrapper">
      <keep-alive>
        <component :is="currentComponent" />
      </keep-alive>
    </div>
  </n-card>
</template>

<script setup lang="ts">
import { ref, computed, markRaw } from 'vue'
import Encrypt from '@renderer/components/encrypt/Encrypt.vue'
import Conversion from '@renderer/components/conversion/Conversion.vue'
import Generate from '@renderer/components/generate/Generate.vue'
import Http from '@renderer/components/http/index.vue'
import Encode from '@renderer/components/encode/index.vue'

const activeTab = ref('conversion')

const components = {
  conversion: markRaw(Conversion),
  encrypt: markRaw(Encrypt),
  encode: markRaw(Encode),
  generate: markRaw(Generate),
  http: markRaw(Http)
}

const currentComponent = computed(() => components[activeTab.value])
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}

:deep(.n-card__content) {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.tabs-wrapper {
  flex-shrink: 0;
}

.content-wrapper {
  flex: 1;
  overflow: hidden;
  padding: 16px;
  height: calc(100% - 48px); /* 减去tabs的高度 */
}

:deep(.n-tabs-nav) {
  padding: 16px 16px 0;
  flex-shrink: 0;
}

:deep(.n-tabs-nav-scroll-content) {
  justify-content: flex-start;
}

/* 美化滚动条 */
.content-wrapper::-webkit-scrollbar {
  width: 8px;
}

.content-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.content-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  border-radius: 4px;
}

.content-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-color-hover);
}
</style> 